<template>
	<view>
		<view>hello-uni我是新建的</view>
		<view>我是信息页</view>
		<view v-for="(item,index) of imgArr" :key="index">
			<!-- 预览图片 -->
			<image :src="item" @click="previewImg(item)"></image>
		</view>
		<button @click="chooseImg" type="primary">上传图片</button>
		
		<!-- 夸平台 条件编译 -->
		<!-- #ifdef H5  -->
		<view>我只在H5页面中出现</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>我只在微信小程序中出现</view>
		<!-- #endif -->
	</view>
</template>
	
<script>
	export default{
		data(){
			return{
				imgArr:[]
			}
		},
		methods:{
			chooseImg(){
				console.log("上传图片")
				// 上传图片
				uni.chooseImage({
					count:5,
					success:(res)=>{
						console.log(res,"上传之后的res")
						this.imgArr = res.tempFilePaths
					}
				})
			},
			// 预览图片的方法
			previewImg(current){
				console.log(current)
				uni.previewImage({
					current,
					urls:this.imgArr,
					// app 能行 h5 和 小程序不好用
					indicator:"default",
					loop:true
				})
			}
			
		},
		onLoad() {
			// 条件编译  方法也可以进行 条件筛选
			// #ifdef MP-WEIXIN
			console.log('微信打印')
			// #endif
			// #ifdef H5
			console.log('H5中打印')
			// #endif
		}
	}
</script>

<style>
	/* 样式里也可以进行 条件编译 方法是一样的 #ifdef MP-WEIXIN #endif*/
</style>
